<template>
  <div class="resume-status-container">
    <div class="status-header">
      <h2 class="page-title">我的简历</h2>
    </div>
    
    <div v-if="status === 'rejected' && rejectReason" class="reject-notice">
      <el-alert
        title="简历审核未通过"
        :description="rejectReason"
        type="error"
        :closable="false"
        show-icon
      >
        <template #default>
          <div class="reject-details">
            <p><strong>驳回原因：</strong>{{ rejectReason }}</p>
            <p><strong>建议：</strong>请根据上述原因修改简历信息，重新提交审核。</p>
            <div class="action-buttons">
              <el-button type="primary" size="small" @click="scrollToForm">
                <el-icon><Edit /></el-icon>
                立即修改
              </el-button>
              <el-button type="info" size="small" @click="showGuidance">
                <el-icon><QuestionFilled /></el-icon>
                查看修改指南
              </el-button>
            </div>
          </div>
        </template>
      </el-alert>
    </div>
    
    <div v-else-if="status === 'incomplete'" class="incomplete-notice">
      <el-alert
        title="简历信息不完整"
        description="请完善以下必填信息后重新提交审核"
        type="warning"
        :closable="false"
        show-icon
      >
        <template #default>
          <div class="incomplete-details">
            <p>请确保以下信息已完整填写：</p>
            <ul>
              <li v-for="(item, index) in incompleteFields" :key="index">
                {{ item }}
              </li>
            </ul>
          </div>
        </template>
      </el-alert>
    </div>
    
    <div v-else-if="status === 'pending' || status === 'pending_review'" class="pending-notice">
      <el-alert
        title="简历审核中"
        description="您的简历正在审核中，请耐心等待。审核结果将通过邮件通知您。"
        type="info"
        :closable="false"
        show-icon
      />
    </div>
    
    <div v-else-if="status === 'approved'" class="approved-notice">
      <el-alert
        title="简历审核通过"
        description="恭喜！您的简历已通过审核，可以正常投递申请。"
        type="success"
        :closable="false"
        show-icon
      />
    </div>
    
    <!-- 修改指南对话框 -->
    <el-dialog
      v-model="guidanceVisible"
      title="简历修改指南"
      width="600px"
      :close-on-click-modal="false"
    >
      <div class="guidance-content">
        <div class="guidance-section">
          <h4>📝 基本信息修改指南</h4>
          <ul>
            <li><strong>姓名：</strong>请确保填写真实姓名，中文姓名或英文姓名均可</li>
            <li><strong>性别：</strong>请选择您的性别</li>
            <li><strong>国籍：</strong>请选择您的国籍</li>
            <li><strong>出生日期：</strong>请填写准确的出生日期</li>
            <li><strong>联系方式：</strong>请填写有效的电话号码和邮箱地址</li>
          </ul>
        </div>
        
        <div class="guidance-section">
          <h4>🎓 教育经历修改指南</h4>
          <ul>
            <li>请填写完整的学校名称</li>
            <li>专业名称要准确无误</li>
            <li>学历层次要正确选择</li>
            <li>入学和毕业时间要准确</li>
          </ul>
        </div>
        
        <div class="guidance-section">
          <h4>💼 工作经验修改指南</h4>
          <ul>
            <li>工作经历要按时间顺序填写</li>
            <li>公司名称要完整准确</li>
            <li>职位名称要具体明确</li>
            <li>工作内容要详细描述</li>
            <li>工作时间要准确</li>
          </ul>
        </div>
        
        <div class="guidance-section">
          <h4>🔧 技能特长修改指南</h4>
          <ul>
            <li>技能描述要具体明确</li>
            <li>语言能力要真实准确</li>
            <li>证书信息要完整</li>
            <li>个人优势要突出特色</li>
          </ul>
        </div>
        
        <div class="guidance-tips">
          <h4>💡 修改建议</h4>
          <p>1. 请仔细阅读驳回原因，针对性地进行修改</p>
          <p>2. 确保所有必填信息都已完整填写</p>
          <p>3. 信息要真实准确，避免虚假信息</p>
          <p>4. 修改完成后重新提交审核</p>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="guidanceVisible = false">关闭</el-button>
          <el-button type="primary" @click="scrollToForm">
            立即修改简历
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from 'vue'
import { Clock, Check, Warning, Close, Edit, QuestionFilled } from '@element-plus/icons-vue'

export default {
  name: 'ResumeStatusTag',
  components: { Clock, Check, Warning, Close, Edit, QuestionFilled },
  props: {
    status: {
      type: String,
      default: 'pending',
      validator: (value) => ['pending', 'pending_review', 'approved', 'incomplete', 'rejected'].includes(value)
    },
    rejectReason: {
      type: String,
      default: ''
    },
    incompleteFields: {
      type: Array,
      default: () => []
    }
  },
  setup() {
    const guidanceVisible = ref(false)
    
    // 滚动到表单区域
    const scrollToForm = () => {
      const formElement = document.querySelector('.resume-form')
      if (formElement) {
        formElement.scrollIntoView({ 
          behavior: 'smooth', 
          block: 'start' 
        })
      }
      guidanceVisible.value = false
    }
    
    // 显示修改指南
    const showGuidance = () => {
      guidanceVisible.value = true
    }
    
    return {
      guidanceVisible,
      scrollToForm,
      showGuidance
    }
  },
  methods: {
    getStatusType(status) {
      // 处理空值或未定义的情况
      if (!status || status === '') return 'info'
      
      const typeMap = {
        pending: 'warning',
        pending_review: 'warning',
        approved: 'success',
        incomplete: 'warning',
        rejected: 'danger',
        draft: 'info',
        submitted: 'warning',
        reviewing: 'warning',
        active: 'success',
        inactive: 'info',
        expired: 'danger'
      }
      return typeMap[status] || 'info'
    },
    
    getStatusText(status) {
      // 处理空值或未定义的情况
      if (!status || status === '') return '草稿'
      
      const textMap = {
        pending: '待审核',
        pending_review: '待审核',
        approved: '已通过',
        incomplete: '信息不完整',
        rejected: '审核未通过',
        draft: '草稿',
        submitted: '已提交',
        reviewing: '审核中',
        active: '活跃',
        inactive: '非活跃',
        expired: '已过期'
      }
      return textMap[status] || '未知状态'
    }
  }
}
</script>

<style scoped>
.resume-status-container {
  margin-bottom: 24px;
}

.status-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e4e7ed;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.reject-notice,
.incomplete-notice,
.pending-notice,
.approved-notice {
  margin-bottom: 20px;
}

.reject-details,
.incomplete-details {
  margin-top: 8px;
}

.reject-details p,
.incomplete-details p {
  margin: 4px 0;
  font-size: 14px;
  line-height: 1.5;
}

.incomplete-details ul {
  margin: 8px 0 0 20px;
  padding: 0;
}

.incomplete-details li {
  margin-bottom: 4px;
  font-size: 14px;
  color: #606266;
}

.action-buttons {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.guidance-content {
  max-height: 400px;
  overflow-y: auto;
}

.guidance-section {
  margin-bottom: 20px;
}

.guidance-section h4 {
  color: #303133;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 600;
}

.guidance-section ul {
  margin: 0;
  padding-left: 20px;
}

.guidance-section li {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: #606266;
}

.guidance-tips {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  padding: 16px;
  margin-top: 20px;
}

.guidance-tips h4 {
  color: #1976d2;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 600;
}

.guidance-tips p {
  margin: 4px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #606266;
}

.dialog-footer {
  text-align: right;
}
</style> 